<template>
	<view>
		<navbar  :title="(cashType=='edit'?'编辑':'添加')+'商品'" :isGoBack="true" :isNotice="true" ></navbar>
		<form @submit="formSubmit" @reset="formReset">
		<view class="opinion_wrap">		  
		    <view class="dochsh_two">
				<text class="service_fw text-lg">填写商品信息</text> 
				<view class="phone">
				   <input name="goods_cate"   :value="goodsInfo.goods_cate" placeholder-class="placeholder"  @click="goods_cate" placeholder="请输入商品分类" disabled />
				</view>
				<view class="phone">
				    <input name="goods_title" :value="goodsInfo.goods_title" placeholder-class="placeholder" placeholder="请输入商品名称" />
				</view>
				
				<view class="phone">
				    <input name="goods_price" :value="goodsInfo.goods_price" placeholder-class="placeholder" placeholder="请输入商品价格" />
				</view>
				
				<view class="phone showImages" style="background-color: white;margin-top: 15rpx;padding-top: 15rpx;padding-left:20rpx">
				    <text class="text-df" style="margin-top:20rpx;margin-bottom:20rpx;">上传主图片</text>
					<u-upload :fileList="fileList1" @afterRead="afterRead" :previewFullImage="true" @delete="deleteImg" name="1" multiple :maxCount="1"></u-upload>
				</view>  	
		
				<view class="phone mb-20">
					<view class="flex justify-between" style="margin-right:30rpx;padding-top:10rpx;">
					  <text class="service_fw text-lg">商品规格信息</text> 
					  <view class="add_plus" @click="addItem">
						<u-icon name="plus"  size="15"></u-icon>							  
					  </view>					  
					</view>
					<input style="margin-left: 20rpx;" class="godds-info-top" name="goods_spec_name" :value="goods_spec_name" placeholder-class="placeholder" placeholder="名称，口味"  />
					<input   name="goods_sku_id" style="display:none"  :value="goodsInfo.goods_sku.id" />
					
					 <view class="goods-one" v-for="(item,index) in info.details" :key="index"> 					 
						<!-- <input :name="goods_skuId[index]" style="display:none"  :value="info.details[index].id" /> -->
						<view class="flex justify-center align-center " style="margin-top:20rpx;">
							<view class="flex justify-center align-center ">							   
								<u-upload   :fileList="info.details[index].image"  :previewFullImage="true" @afterRead="afterRead04" @delete="deleteImg2" :name="String(index)"   :maxCount="1" width="90" height="90"></u-upload>
							</view>
							<view style="position: absolute;margin-top:-200rpx;right: 20rpx;">
								 <u-icon name="close-circle"  @click="removeItem(index,info.details[index].id)"/></u-icon>
							</view>						 						   
						</view>  
						<view class="flex" style="margin-top:-20rpx;margin-left: 10rpx;">   
							<input class="godds-info" name="name" style="width: 200rpx;" :value="info.details[index].goods_spec" placeholder-class="placeholder" placeholder="规格，麻辣"  @input="handleInputChange($event, index,'goods_spec')"/>
							<input class="godds-info" name="name" style="width: 180rpx;" :value="info.details[index].selling_price" placeholder-class="placeholder" placeholder="商品价格"  @input="handleInputChange($event, index,'selling_price')" />
							<input class="godds-info" name="name" style="width: 180rpx;" :value="info.details[index].stock" placeholder-class="placeholder" placeholder="商品库存"  @input="handleInputChange($event, index,'stock')"/>
						</view>  
					 </view>                
				  </view>			  
			   </view>			
		
		        <view class="uni-btn-v">
					<button form-type="submit">提交</button>
		        </view>
		</view>
		<u-picker :show="show" ref="uPicker" :loading="loading" :columns="columns" @change="changeHandler" @confirm="confirm" @cancel="cancel"></u-picker>
	    </form>
	</view>
</template>

<script>
	import config from '@/utils/config.js';
	var that
	var list = []
	function Detail(placeName, number) {
	   
	}
	function Info() {
	   this.details = [];
	}


	 export default {
		data(){
			return {
				goodsInfo:{
					goods_cate:'',
					goods_title:'',
					goods_price:'',
					goods_sku:{
						id:""
					}
				},
				show: false,
				loading: false,
				columns: [],
				columnData: [],
				fileList1:[],
				fileList2:[],
				goodsSkuId:[],
				info:{
					details:[]
				},
				goods_spec_name:'规格',
				goods_value:'默认',
				goods_price:0,
				goods_stock:0,
				cateId:'',
				catePId:'',
				goodsId:'',
				goodsInfo:{
					goods_sku:{
						id:''
					}
				},
				goodsSkuId:[],
				cashType:'',
			}
		},
		onLoad(options) {
			this.cashType=options.cashType
			this.goodsId=options.goodsId
			this.$http.doGoodsCate().then(res=>{
			    if(res.resCode=="9999"){
			        this.columns=res.data.goods_cates_name
			        this.columnData=res.data.goods_cates			         
			    }
			})	
			
			if(this.goodsId){
			    this.$http.goodsEdit({goodsId:this.goodsId,goods_type:'app'}).then(res=>{
				  if(res.resCode=='9999'){
					this.goodsInfo=res.data
					this.fileList1=res.data.fileList1 
					this.info={
						details:res.data.goods_sku_list
					}				
				  }
				})
			}	
		},
		
		onShow(){
			this.goodsSkuId=[]
						  
		},
		
		
		methods:{			
			handleInputChange(e, index,name) {
			    // 获取当前输入框的值并更新对应位置的inputs数据
				this.$set(this.info.details[index], name, e.target.value);
			},
			
			formSubmit: function(e) {			
				let val=e.detail.value
				let user_info=uni.getStorageSync('userInfo');
				val.info=this.info
				val.storageId=user_info.shopInfo.id 
				val.image1=JSON.stringify(this.fileList1)  
				val.goods_type="app"	
				val.goodsId=this.goodsId
				val.goodsSkuId=this.goodsSkuId				
				this.$http.doGoodsAdd(val).then(res=>{
					if(res.resCode=="9999"){
					  uni.showToast({ title: res.resMessage, icon: 'none' })
					  setTimeout(function(){
						  uni.navigateTo({
						  	url:"/pages/pagesuser/goods/index",
							// success: function (e) {
							// 	let pages = getCurrentPages()
							// 	let currPage = pages[pages.length-1] //当前页面B页面实例								
							// 	currPage.onShow() //调用A页面的refresh方法
							// }
						  })
					  },2000)
					}else{
					   uni.showToast({ title: res.resMessage, icon: 'none' })
					}
				})				
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			
			
			
			addItem: function (e) {
			    let info = this.info;
			    info.details.push(new Detail());
			    this.info=info
			},
			
			//删除属性
			removeItem:function(delIndex,skuid){		
			    const info = this.info
				let goodsSkuId=this.goodsSkuId
				goodsSkuId.push(skuid)
			    info.details.splice(delIndex, 1)
			    this.info=info
				this.goodsSkuId=goodsSkuId
			},			  
			
			goods_cate(){
				this.show=true
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.goodsInfo.goods_cate=e.value.join(",")
				this.show = false
			},
			//取消按钮
			cancel(){
				this.show = false
			},
		    
			afterRead(event) {		   					
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})					
			    for (let i = 0; i < lists.length; i++) {
					  this.uploadImg(i,lists[i].url,1)
				}
			    			    
			},
			  
			afterRead04(event) {  
				 var that = this
				let lists = [].concat(event.file)
				let info=that.info
				for (let j = 0; j < info.details.length; j++) {
				  if(j==event.name){    
					that.$set(that.info.details[event.name], 'image', [{
						status: 'uploading',
						message: '上传中',
						thumb:lists[0].url,
						type:'image',
						url:lists[0].url
					}]);    
				  }     
				}
				for (let i = 0; i < lists.length; i++) {
				    this.uploadImg(i,lists[i].url,4,event.name)
				}				  
			},
			  
			  
			uploadImg(fileListIndex,fileURL,type,index) {
			    var that = this
			    //上传文件
			    const filePath = fileURL // 小程序临时文件路径
			    // console.log("filePath",filePath)
			    wx.uploadFile({
			      url: config.api_url+'/api/index/uploadImage',
			      filePath: filePath,
			      name: 'file',
			      header: {
			        "Content-Type": "multipart/form-data",
			      },
			      formData: { 
			        fileType:'image',
			        reName:'true',
			        thumbnail:'true'
			      },
			      success(res) {
			      var tem = JSON.parse(res.data)
			      // 上传完成需要更新 fileList
			      if(type==1){
					  let fileListLen = that.fileList1.length
					  let item = that.fileList1[fileListIndex]
					  that.fileList1.splice(0, 1, Object.assign(item, {
					  	status: 'success',
					  	message: '',
					  	url:tem.data.image
					  }))
			      }else if(type==4){
			        let info=that.info
			        for (let j = 0; j < info.details.length; j++) {
			          if(j==index){    
						that.$set(that.info.details[index], 'image', [{
							status: 'success',
							message: '',
							thumb:tem.data.image,
							type:'image',
							url:tem.data.image
						}]);    
			          }     
			        }
			      }
			      uni.showToast({ title: '上传成功', icon: 'none' })
			
			      },
			      fail: function (res) {
			        console.log("file upload fail")
			      },
			    })
			},
			  
			  
			     /* 删除图片*/
			deleteImg(event) {
                const delIndex = event.index 
				const  fileList1  = this.fileList1
				fileList1.splice(delIndex, 1)
				this.fileList1=fileList1  
			},
			
			deleteImg2(event) {
				const delIndex = event.name
				const  info  = this.info
				info.details[delIndex].image.splice(0, 1)
				this.info=info			         
			}			  
		}
		
		  
	 }
</script>

<style>
	.add_plus{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #606266;
		border-radius: 50%;
		margin-top: 12rpx;
	
	}
	/* pagesGoods/goodsAdd/index.wxss *//* pagesUser/feedback/index.wxss *//* pages/feedback/feedback.wxss */
	.dochsh_one{
	  background-color: white;
	  margin-top: 20rpx;
	  padding-bottom: 15rpx;
	}
	
	.dochsh_two{
	  background-color: white;
	  padding-top: 30rpx;
	  /* padding-bottom: 550rpx; */
	}
	.content_wrap, .phone{
	  width: 96%;
	  background-color: #fff;
	  border-radius: 10rpx;
	  margin: 20rpx auto;
	  box-shadow: 0px 0px 10px 2px rgb(0 0 0 / 8%);
	}
	.content{
	  padding: 20rpx;
	  margin: 0 auto;
	  border-radius: 10rpx;
	}
	textarea{
	  min-height: 300rpx;
	  width: 100%;
	}
	input{
	  margin-top: 30rpx;
	  height: 100rpx;
	  padding-left: 20rpx;
	  background-color: #fff;
	}
	button{
	color: white;
	border: none;
	width: 85%;
	padding: 10rpx 0rpx;
	margin: 40rpx auto;
	background: #2b85e4;
	border-radius: 40rpx;
	font-size: 30rpx;
	}
	
	.button_active{
	background: #5cadff;
	}
	.placeholder{
	  color: #b6b6b6;
	  font-size: 14px;
	}
	
	.service_fw{
	  display: flex;
	  padding-top: 10rpx;
	  margin-left: 22rpx;
	  font-weight: bold;
	}
	
	.showImages{
	  display: flex;
	  flex-direction: column;
	}
	
	.godds-info-top{
	  border: 1px solid #f3f3f3;
	  /* width: 800rpx; */
	  height: 80rpx;
	  margin-right: 20rpx;
	}
	.godds-info{
	  border: 1px solid #f3f3f3;
	  width: 160rpx;
	  height: 60rpx;
	  margin-right: 20rpx;
	}
	
	
	.goods-one{
	 
	  margin-left:20rpx; 
	  margin-right:20rpx; 
	  display: flex;
	  flex-direction: column;
	  margin-top: 20rpx;
	  border: 1px solid #f3f3f3;
	  padding-bottom: 20rpx;
	}
</style>